<template>
  <!-- 商品列表 -->
  <div class="card-wrap">
    <!-- <h1 class="card-title">工程师推荐</h1> -->
    <!-- 循环渲染过滤好的数据 -->
    <div v-for="(item, index) in evenGoodsList" :key="item+index">
      <van-card
        :title="item.title"
        :thumb="item.thumb"
        :tag="item.tag"
        :lazy-load="true"
        title-class="sales-title"
        num-class="sales-num"
        custom-class="sales-wrap"
      >
        <!-- @click="toPage(item.link)" -->
        <!-- 团购标签 -->
        <view slot="desc" class="sales-desc">
          <div class="left">
            <span>2人成团</span>
          </div>
          <div class="right">
            <span>极速退款</span>
          </div>
        </view>
        <!-- 商品团购价钱 -->
        <view slot="tags" class="sales-price">
          <div class="sales-oldprice">
            零售价: <span>{{MoneySymbol}}{{item.oldprice}}</span>
          </div>
          <div class="sales-newprice">
            拼团价: <span>{{MoneySymbol}}{{item.price}}</span>
          </div>
        </view>
        <!-- 购买图标 -->
        <view slot="footer">
          <div class="sales-shopping-box" @click.stop="toGoodsBuy(item.link)">
            <button class='sales-shopping-btn'>
              去组团
            </button>
          </div>
        </view>
      </van-card>

    </div>
  </div>
</template>

<script>
import { bindViewTap } from '@/utils/index' // 引入公用库
import TYPES from '@/constant/index' // 常量文件

export default {
  props: ['goodsList', 'navto'], // 接收外部传入的数据
  data () {
    return {
      MoneySymbol: TYPES.goodsData.MoneySymbol, // 存金额前缀符号
      lazy: true
    }
  },
  computed: {
    // 过滤一下数据，tag有值就变成指定标签字体
    evenGoodsList: function () {
      return this.goodsList.filter(function (data) {
        if (data.tag === 1) {
          data.tag = '热门'
        }
        return data
      })
    }
  },
  methods: {
    // TODO: 商品购买跳转
    toGoodsBuy (id) {
      console.log('组团操作', id)
      let navFlag = this.navto || false // 默认不使用navto方式跳转页面
      bindViewTap(`../productPage/main?id=${id}&bulk=true`, navFlag)
    },
    // TODO: 跳到商品详情页面
    toPage (id) {
      console.log('商品页', id)
      let navFlag = this.navto || false // 默认不使用navto方式跳转页面
      bindViewTap(`../productPage/main?id=${id}`, navFlag)
    }
  }
}
</script>

<style>
.card-wrap {
  display: block;
}
/* 列表标题 */
.card-title {
  /* margin-bottom: 10px; */
  height: 46rpx;
  line-height: 46rpx;
  font-size: 28rpx;
  font-weight: bold;
  padding: 10rpx 0 10rpx 20rpx;
  background: #fff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
/* 每个list的控制层 */
.sales-wrap {
  margin-bottom: 5px;
  background: #000 !important;
  color: #fff !important;
  /* box-shadow: 0 2px 5px #969696,
    inset 0 0 0 -1px black; */
}
.sales-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*显示几行*/
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-top: 10rpx;
  font-size: 26rpx;
}
/* 商品详细描述, tags（2人成团） */
.sales-desc{
  position: absolute;
  overflow: hidden;
  display: flex;
  bottom: 95rpx;
  width: 220rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 22rpx;
  justify-content: center;
  align-items: center;
  border: 1Px solid #E2C573;
  border-radius: 10rpx;
  text-align: center;
  color: #E2C573;
}
.sales-desc .left{
  flex: 1;
  border-radius: 0 10rpx 10rpx 0;
  background: #E2C573;
  color: #000;
}
.sales-desc .right{
  flex: 1;
}
/* 拼团商品价格 */
.sales-price {
  position: absolute;
  bottom: 16rpx;
}
.sales-oldprice {
  font-size: 24rpx;
  text-decoration: line-through;
}
/* .sales-oldprice span {
  text-decoration: line-through;
} */
.sales-newprice {
  /* margin-top: 8rpx; */
  font-size: 24rpx;
}
.sales-newprice span {
  font-weight: bold;
  font-size: 32rpx;
  color: #E2C573;
}
/* 销量样式 */
.sales-num {
  position: absolute;
  float: none !important;
  font-size: 28rpx;
  bottom: 20rpx;
}
/* 去组团按钮 */
.sales-shopping-box {
  position: absolute;
  right: 40rpx;
  bottom: 30rpx;
  border-radius: 16rpx;

  background: #E2C573;
}
.sales-shopping-btn {
  width: 133rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  background: #E2C573;
}

/* 左侧图片调整空间大小 */
.van-card__thumb {
  width: 320rpx !important;
  height: 240rpx !important;
}
</style>
